import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/line/lit-line-y.ts"
import {LineYProps} from "../../../echarts/line/lit-line-y.ts";

const meta: Meta<LineYProps> = {
    title: 'Echarts/LitLineY',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: LineYProps): TemplateResult => {
        return html`<lit-line-y 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .legend=${args.legend}
            .tooltip=${args.tooltip}
            .xUnit=${args.xUnit}
            .yUnit=${args.yUnit}
            .yAxisData=${args.yAxisData}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        legend: { control: 'object' },
        tooltip: { control: 'object' },
        xUnit: { control: 'text' },
        yUnit: { control: 'text' },
        yAxisData: { control: 'object' },
        seriesData: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<LineYProps>;

export const Default: Story = {
    args: {
        chartId: 'line-y-chart',
        width: '1200px',
        height: '600px',
        legend: ['Altitude (km) vs. temperature (°C)'],
        tooltip: {
            trigger: 'axis',
            formatter: 'Temperature : <br/>{b}km : {c}°C'
        },
        xUnit: '°C',
        yUnit: 'km',
        yAxisData: ['0', '10', '20', '30', '40', '50', '60', '70', '80'],
        seriesData: [
            [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        ]
    }
}
